<template>
  <div class="actmgt">
    <el-container>
      <el-aside width="250px" class="actmgt-left">
        <el-aside class="actmgt-waring">
          <div class="left">
            <el-icon><InfoFilled color="rgb(255,209,0)" size="40"/></el-icon>
          </div>
          <div class="right">
            <div class="top" style="margin-left: -45px">使用前需启用平台</div>
            <div class="bottom" style="margin-left: 27px">(同时只能在线一个平台)</div>
          </div>
        </el-aside>
        <el-aside class="actmgt-search">
          <span>平台：</span>
          <el-input
          v-model="input1"
          class="w-50 m-2 actmgt-search-input"
          placeholder="单行输入"
          :suffix-icon="Search"
          />
          <el-icon><Search /></el-icon>
        </el-aside>
        <el-scrollbar class="actmgt-left-box">
          <!-- <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p> -->
          <el-container v-for="item in 20" :key="item" class="scrollbar-demo-item">
            <el-main class="actmgt-right">
              <el-container class="actmgt-right-info">
                <el-aside width="79px" class="actmgt-right-info-left"><img src="@/assets/appImg/douyin.png" alt=""></el-aside>
                <el-main class="actmgt-right-info-middle">
                  <div>TikTok</div>
                  <div>现控200个</div>
                </el-main>
                <el-main class="actmgt-right-info-right">有效198个</el-main>
              </el-container>
            </el-main>
            <el-aside class="actmgt-left-right"><span>上线启用</span></el-aside>
          </el-container>
        </el-scrollbar>
      </el-aside>
      <el-main class="actmgt-middle" style="width: 260px">
        <div>
          <el-container>
            <el-header class="el_header">
              <div class="el_header-left">
                <span>搜索：</span>
                <el-input v-model="input2" style="width: 300px; box-shadow: 0px 0px 1px #888888; border-bottom: #888888;" placeholder="请输入" />
              </div>
              <el-button type="primary">查询</el-button>
            </el-header>
            <el-main class="el_main">
              <el-table
                :data="tableData"
                style="width: 100%; overflow: hidden; font-size: 12px;"
                height="68vh"
                class="el_table"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name"  label="全选" align="center">
                  <template #header>
                    <el-radio-group v-model="radio1">
                      <el-radio label="全选" size="large"></el-radio>
                      <!-- <el-radio label="2" size="large">Option 2</el-radio> -->
                    </el-radio-group>
                  </template>
                  <el-radio-group v-model="radio2">
                    <el-radio label="1" size="large"></el-radio>
                    <!-- <el-radio label="2" size="large">Option 2</el-radio> -->
                  </el-radio-group>
                </el-table-column>
                <el-table-column prop="name" label="头像" align="center">
                  <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt="">
                </el-table-column>
                <el-table-column prop="name"  label="" align="center">
                  <div>昵称</div>
                  <div>创建时间</div>
                </el-table-column>
                <el-table-column prop="name" label="详细信息" align="center">
                  <div>测试账号</div>
                  <div>2022年4月10日</div>
                </el-table-column>
                <el-table-column prop="name" label="" align="center">
                  <div>关注：<span>128</span></div>
                  <div>粉丝：<span>5068</span></div>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center">
                  <div><img src="@/assets/images/在线.png" style="width: 18px; height: 18px;" alt=""></div>
                  <div>正常</div>
                </el-table-column>
                <el-table-column prop="name" label="操作" align="center">
                  <template #default="scope">
                    <el-button size="small" 
                      type="primary" 
                      @click="handleEdit(scope.$index, scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      size="small"
                      type="primary"
                      @click="handleDelete(scope.$index, scope.row)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer class="el_footer">
              <div class="el_footer_left">已选账号数</div>
              <div class="el_footer_right">
                <el-button
                  type="primary"
                  @click="handleDelete(scope.$index, scope.row)"
                  >使用</el-button
                >
                <el-button
                  type="primary"
                  @click="handleDelete(scope.$index, scope.row)"
                  >启用</el-button
                >
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-main>
      <el-main class="info-right">
        <el-container>
          <el-header class="info-right-el-header">
            <div class="info-right-el-header-top-left">
              <div class="top">创建账号</div>
              <div class="bottom">
                批量创建可
                <a href="">下载Excel表格</a>
                填写上传</div>
            </div>
            <div class="info-right-el-header-top-rgiht">
              <el-button
                size="small"
                type="primary"
                class="button"
                @click="handleDelete(scope.$index, scope.row)"
                >上传模板创建</el-button
              >
            </div>
          </el-header>
          <el-main class="info-bottom-el-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <div class="alite_div">基础设置</div>
              <el-form-item label="用户名：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="账号密码：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="账号头像：" prop="name">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" style="width: 50px; height: 50px;">
                  <img style="width: 50px; height: 50px;" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <el-form-item label="账号简介：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="Cookie：" prop="desc">
                <el-input 
                type="textarea" 
                v-model="ruleForm.desc" 
                placeholder='选填，支持数组包含JSON格式的Cookie,例如["name": name, "value" :value, "domain":domain]'
                ></el-input>
              </el-form-item>
              <el-form-item label="账号地址：" prop="name" class="userInfo_div">
                <el-input v-model="ruleForm.name"></el-input>
                <el-upload
                  action=""
                  :limit="1"
                  :on-change="handleChange"
                  :auto-upload="false"
                  :file-list="fileList"
                  :show-file-list="false"
                  style="background: rgb(232,232,232); color: rgb(120,120,120)"
                >
                  <span class="span_button">选择文件</span>
                </el-upload>
              </el-form-item>
              <div class="alite_div">代理设置</div>
              <el-form-item label="代理方式：" prop="region">
                <el-select v-model="ruleForm.region" placeholder="代理模式">
                  <el-option label="自定义代理" value="shanghai"></el-option>
                  <el-option label="推荐商代理" value="beijing"></el-option>
                  <el-option label="ROLA" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="代理类型：" prop="region">
                <el-select v-model="ruleForm.region" placeholder="代理类型">
                  <el-option label="HTTP" value="shanghai"></el-option>
                  <el-option label="HTTPS" value="beijing"></el-option>
                  <el-option label="SOCKS5" value="beijing"></el-option>
                  <el-option label="911s5" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="代理token：" prop="region">
                <el-input type="textarea" v-model="ruleForm.desc" placeholder="Mozilla/"></el-input>
              </el-form-item>
              <div class="alite_div">指纹设置</div>
              <el-form-item label="操作系统：" prop="region">
                <el-select v-model="ruleForm.region" placeholder="操作系统">
                  <el-option label="windows" value="shanghai"></el-option>
                  <el-option label="Linux" value="beijing"></el-option>
                  <el-option label="macOS" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="User Agent：" prop="desc">
                <el-input 
                style="font-size: 12px;" 
                type="textarea" 
                v-model="ruleForm.desc" 
                placeholder="Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537 .36 (KHTML, like Gecko)Chrome/81.0.2705.100 Safari/537.36"
                ></el-input>
              </el-form-item>
              <el-form-item label="语言：" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
                <div class="text_div">
                  <div style="font-size: 12px">基于代理IP生成对应国家的浏览器语言</div>
                  <div style="font-size: 12px">不勾选可自定义</div>
                </div>
              </el-form-item>
              <el-form-item label="界面语言：" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
                  <div class="text_div">
                    <div style="font-size: 12px">基于IP生成对应国家的浏览器界面语言</div>
                    <div style="font-size: 12px">不勾选可自定义</div>
                  </div>
              </el-form-item>
              <el-form-item label="时区：" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
                  <div class="text_div">
                    <div style="font-size: 12px">基于IP生成对应的时区</div>
                    <div style="font-size: 12px">不勾选可自定义</div>
                  </div>
              </el-form-item>
              <!-- <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="线上品牌商赞助"></el-radio>
                  <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary" style="margin-left: 180px" @click="submitForm('ruleForm')">生成</el-button>
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }
      ],
      radio1: 0,
      radio2: 1,
      ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        dialogImageUrl: '',
        dialogVisible: false
    }
  },
  methods: {
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 选择文件
		handleChange(file, fileLists) {
			console.log(file);
			console.log(fileLists);
			// 本地服务器路径
			console.log(URL.createObjectURL(file.raw));
			// 本地电脑路径
			console.log(document.getElementsByClassName("el-upload__input")[0].value); 
		}
  }
}
</script>

<style>
/* @media (min-height: 500px) {
  .el_table{
    height: 67vh !important;
  }
}

@media (max-height: 500px) {
  .el_table{
    height: 72vh !important;
  }
} */

.el-textarea__inner {
  height: 85px;
}

.span_button {
  line-height: 33px;
}

.el-form-item__content {
  line-height: 13px;
  text-align: left;
}

.text_div {
  margin-left: 5px;
}

.demo-ruleForm {
  background-color: #fff;
  padding: 5px 5px 5px 0;
  /* height: 76vh; */
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: hidden;
  font-size: 12px;
}

.el-form-item__label {
  font-size: unset;
}

.info-bottom-el-main::-webkit-scrollbar {
 display: none;
}

.info-bottom-el-main {
  height: 77vh;
  overflow-x: scroll;
  overflow-y: scroll;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.userInfo_div {
  white-space: nowrap;
}

.userInfo_div .el-input {
  width: 78%;
}

.alite_div {
  margin-left: -280px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #1074FD;
}

.el-upload--picture-card {
  width: 50px;
  height: 50px;
}

/* .el-form-item__label {
  margin-left: 40px;
} */

.demo-ruleForm .el-input__wrapper {
  box-shadow: 0px 0px 1px #888888;
  border-bottom: #888888;
}

.actmgt {
  margin: 15px 20px;
  /* overflow-y: hidden;
  overflow-x: hidden; */
}

.actmgt-left {
  background-color: white;
  margin-right: 15px;
  height: 85vh;
  border-radius: 5px;
}

.actmgt-middle {
  /* background-color: yellow; */
  margin-right: 15px;
  border-radius: 5px;
}

.actmgt-right {
  /* background-color: green; */
  padding: unset;
}

.actmgt-waring {
  display: flex;
  background-color: #2E54EA;
  justify-content: flex-start;
  align-items: center;
  color: white;
  border-radius: 4px;
}

.actmgt-waring .left {
  margin-left: 20px;
}

.actmgt-waring .right {
  font-size: 14px;
}

.actmgt-search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.el-input__wrapper {
  box-shadow: none;
}

.actmgt-search-input {
  width: 160px;
  border-bottom: 1px solid black;
}

.el-icon {
  font-size: 20px;
}

.el-aside {
  overflow: hidden;
}

.el-aside {
  overflow: hidden;
  width: unset;
}

.actmgt-right-info {
  display: flex;
  align-items: center;
  width: 12rem;
  font-size: 12px;
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 5px;
  /* border: 1px solid black; */
  margin: 5px 0 5px 10px;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 0 5px 1px #2ed4ea;
}

.actmgt-right-info-left img {
  width: 38px;
  height: 38px;
  border-radius: 5px;
}

.actmgt-right-info-middle {
  text-align: left;
  margin-left: 10px;
}

.actmgt-right-info-right {
  margin-top: 14px;
}

.el-main {
  --el-main-padding: 0;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
}

.actmgt-left-right {
  width: 24.66px;
  background-color: #2E54EA;
  color: white;
  font-size: 12px;
  height: 63px;
  box-sizing: border-box;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  margin-right: 10px;
  box-shadow: 0 0 5px 1px #2ed4ea;

}

.actmgt-left-right span {
  display: inline-block;
  margin-top: 15px;
}

.el_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 40px 20px;
  /* margin-bottom: 5px; */
  border-bottom: 2px solid rgb(214, 212, 212);
}

.el_header-left {
  font-size: 14px;
}

.el_main {
  overflow: hidden;
}

.el-button--small {
  width: 28px;
}

.el_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-top: 2px solid rgb(214, 212, 212);
}

.info-right {
  width: 40px;
}

.info-right-el-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom: 2px solid rgb(214, 212, 212);
  height: 66px;
}

.info-right-el-header-top-left {
  font-size: 13px;
  white-space: nowrap;
  text-align: left;
  /* margin-left: 10px; */
}

.info-right-el-header-top-left .top {
  font-size: 16px;
}

.info-right-el-header-top-left .bottom a{
  font-size: 16px;
}

.info-right-el-header-top-rgiht .button {
  width: 75px;
  height: 30px;
  margin-left: 15px;
}
</style>